<template>
  <div>
    <!-- 品牌 -->
    <div class="brand" v-if="showIndex == 1">
      <!-- 检测预售电影没有影院数据 -->
      <template v-if="filterCinemas.hasOwnProperty('brand')">
          <div class="brand_item"   v-for="item in filterCinemas.brand.subItems" :key="item.id" @click="changeBrand(item)">
              <span>{{item.name}}</span>
              <span>{{item.count}}</span>
          </div>
      </template>

    </div>

    <!-- 地区 -->
    <div class="district" v-if="showIndex == 2">
         <!-- 检测预售电影没有地区数据 -->
        <AreaSelect v-if="filterCinemas.hasOwnProperty('district')" :filter-cinemas="filterCinemas" style="height:100%;overflow:hidden" @change-district="changeDistrict" @change-subway="changeSubway"></AreaSelect>
    </div>

    <!-- 筛选 -->
    <div class="select" v-if="showIndex == 3">
      <!-- 特色功能 -->
    <template v-if="filterCinemas.hasOwnProperty('service')">
      <div class="select_title">特色功能</div>
      <div class="service_wrapper" >
          <div class="item_btn" :class="{btn_active:serviceActive == item.id}" v-for="item in filterCinemas.service.subItems" :key="item.name" @click="checkService(item)">{{item.name}}</div>
      </div>
    </template>
    <!-- 特效厅 -->
    <template v-if="filterCinemas.hasOwnProperty('hallType')">
      <div class="select_title">特效厅</div>
      <div class="halltype_wrapper" >
          <div class="item_btn" :class="{btn_active:hallTypeActive == item.id}" v-for="(item,index) in filterCinemas.hallType.subItems" :key="index" @click="checkHallType(item)">{{item.name}}</div>
      </div>
      </template>
      <div class="sumbit_btn">
          <div @click="resetBtn">重置</div>
          <div @click="submitBtn">确定</div>
      </div>
    </div>
    <div class="hidden_div" v-if="showIndex" @click="hiddenclick"></div>
  </div>
</template>
<script>

import AreaSelect from './areaSelect'

export default {
  data () {
    return {
      serviceActive: '',
      hallTypeActive: ''
    }
  },
  components: { AreaSelect },
  props: ['filterCinemas', 'showIndex', 'selectList'],
  beforeMount () {
    this.serviceActive = this.selectList.serviceId
    this.hallTypeActive = this.selectList.hallTypeId
  },
  methods: {
    // 电影院选择
    changeBrand (item) {
      this.$emit('change-brand', item)
    },
    // 选择行政区域  地铁 切换事件

    changeDistrict (obj) {
      this.$emit('change-district', obj)
    },
    changeSubway (obj) {
      this.$emit('change-subway', obj)
    },

    // 筛选服务切换事件
    checkService (item) {
      this.serviceActive = item.id
    },
    checkHallType (item) {
      this.hallTypeActive = item.id
    },
    submitBtn () {
      this.$emit('sumbit-btn', {
        serviceId: this.serviceActive,
        hallTypeId: this.hallTypeActive
      })
    },
    resetBtn () {
      this.serviceActive = -1
      this.hallTypeActive = -1
      window.localStorage.setItem('serviceId', -1)
      window.localStorage.setItem('hallTypeId', -1)
    },
    hiddenclick (e) {
      this.$emit('hidden-click')
    }
  }
}
</script>
<style scoped>
    .brand,
    .district,
    .select {
        height: 400px;
        overflow: auto;
        background: #fff;
        font-size: 12px;
        color: #666;
    }
    .brand_item{
      padding: 12px 10px 8px 15px;
      display: flex;flex-direction: row;
      justify-content: space-between;
    }
    .district{
      overflow: hidden;
    }
    .hidden_div{
      width:100%;
      height:200px;
      background: rgba(0, 0, 0, 0.3);
    }
    .select{
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .select_title{
      padding: 8px;
      font-size: 14px;
      color: #333;
    }
    .service_wrapper ,
    .halltype_wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .item_btn {
       display: table-row;
       width: 20%;
       margin: 4px 6px;
       border:1px solid #f2f2f2;
       border-radius: 3px;
       line-height: 30px;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       text-align: center;
       vertical-align: middle;
    }
    .sumbit_btn{
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px 12px;
      border-top: 1px solid #f2f2f2;
    }
    .sumbit_btn div{
        padding: 5px 12px;
        font-size: 14px;
        color: #000;
        border-radius: 3px;
        border: 1px solid #f2f2f2;
    }
    .sumbit_btn div:last-child{
      color: #fff;
      background: #F34D41;
    }
    .btn_active{
      color: #F34D41;
      border:1px solid #F34D41;
      background: #FFF0F0;
    }
</style>
